<template>
  <div>
    <div class="fs34 df aic jsb item">新增客户体检记录 <span class="colorBlue fs30" @click="addrecords">添加</span></div>
    <div>
      <div
        class="pics item"
        v-for="(item, index) in data"
        :key="index"
      >
        <div class="df jsb">
          <div class="df aic colorgray fs30 mb20">
            <label
              for=""
              style="margin-right:20rpx;"
            >体检项名称:</label>
            <input
              class="fs30"
              placeholder="请输入体检项名称"
              hidden
              v-model="item.examine"
            >
            <input
              class="fs30"
              placeholder="请输入体检项名称"
              disabled
              @click="show(index)"
              v-model="item.examine_name"
            >
          </div>
          <div class="del fs30" @click="del(index)">删除</div>
        </div>
        <div class="df aic fww">
          <div
            class="df jcc aic uploadImg "
            v-for="(items, indexs) in item.img_urls"
            
            :key="indexs"
            @click="previewImg(uploadUrl + 'resource/' + items, item.img_urls)"
          >
              <img
                mode="aspectFit"
                :src="uploadUrl + 'resource/' + items + '?imageView/2/w/150/h/200'"
                alt=""
              > 
              <img
                mode="aspectFill"
                src="../../static/assets/images/del.png"
                @click.stop="delImg(index, indexs)"
                class="close"
                alt=""
              > 
          </div> 
          <div
            class="df jcc aic uploadImg"
            @click="uploadImg(6, index)"
          >
            <img
                mode="aspectFill"
                src="../../static/assets/images/add_icon.png"
                class="add_icon"
                alt=""
              > 
          </div> 
        </div>
      </div>
    </div>
    <div class="button mainBgColor" @click="saveRecords">保存</div>
    <mpvue-picker
      ref="mpvuePicker"
      :mode="mode"
      :pickerValueDefault="pickerValueDefault"
      :deepLength="deepLength"
      @onConfirm="onConfirm"
      @onCancel="onCancel"
      :pickerValueArray="pickerValueArray"
    ></mpvue-picker>
  </div>
</template>

<script>
import setting from '@/setting'
import uuid from 'uuid/v1'
import mSelect from '@/components/m_select'
import mpvuePicker from 'mpvue-picker'
import Collection from 'lodash/collection'
export default {
  props: ['upImg'],
  components: {
    mSelect,
    mpvuePicker
  },
  data () {
    return {
      data: [],
      uploadUrl: '',
      chooseIndex: '',
      pickerValueArray: []
    }
  },
  mounted () {
    this.uploadUrl = setting.uploadUrl
    let result = JSON.parse(wx.getStorageSync('dics'))
    let list = Collection.filter(result, { type: 'examination' })
    if (list.length > 0) {
      for (let i in list) {
        this.pickerValueArray.push({
          label: list[i].code,
          value: list[i].value
        })
      }
    }
  },
  watch: {
    upImg () {
      this.data = this.upImg ? this.upImg : []
      if (this.data.length > 0) {
        for (let i in this.data) {
          for (let j in this.pickerValueArray) {
            if (this.data[i].examine === this.pickerValueArray[j].value) {
              this.data[i].examine_name = this.pickerValueArray[j].label
            }
          }
        }
      }
    }
  },
  methods: {
    show (i) {
      this.chooseIndex = i
      this.$refs.mpvuePicker.show()
    },
    onConfirm  (e) {
      this.data[this.chooseIndex].examine_name = e.label
      this.data[this.chooseIndex].examine = e.value[0]
      // this.$emit('input', e.value[0])
    },
    del (index) {
      wx.showModal({
        title: '提示',
        content: '确定要删除吗？',
        success: (res) => {
          if (res.confirm) {
            this.data.splice(index, 1)
          }
        }
      })
    },
    uploadImg (num, index) {
      wx.chooseImage({
        count: num,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePaths = res.tempFilePaths
          // let i = 0
          for (let i in tempFilePaths) {
            wx.uploadFile({
              url: setting.uploadUrl + 'img/upload',
              filePath: tempFilePaths[i],
              name: 'file',
              formData: {
                user: 'test'
              },
              success: (res) => {
                const data = JSON.parse(res.data)
                this.data[index].img_urls.push(data.data)
              }
            })
          }
        }
      })
    },
    delImg (index0, index1) {
      this.data[index0].img_urls.splice(index1, 1)
    },
    previewImg (item, urls) {
      wx.previewImage({
        current: item, // 当前显示图片的http链接
        urls: [item] // 需要预览的图片http链接列表
      })
    },
    addrecords () {
      this.data.push({id: uuid(), examine: '', img_urls: [], examine_name: ''})
    },
    saveRecords () {
      this.$emit('getData', this.data)
    }
  }
}
</script>

<style scoped>
.item{border-bottom: 1px solid #eee;background: #fff;padding: 20rpx 0;}
.uploadImg {
  border: 2rpx solid #eee;
  width: 180rpx;
  height: 200rpx;
  position: relative;
  color: #eee;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}
.uploadImg img {width: 100%;height: 100%;}
.uploadImg .close {
  position: absolute !important;
  right: -25rpx !important;
  top: -25rpx !important;
	width: 50rpx;
	height: 50rpx;	
}
.uploadImg .add_icon {width: 50rpx;height: 50rpx;}
.mb20 {margin-bottom: 20rpx;}
.save{color: red;margin-right: 20rpx;}
.del{color: gray;}
.button{color: #fff;text-align: center; font-size: 28rpx;padding: 20rpx;width: 60%;margin: 0 auto;margin-top: 50rpx;border-radius: 10rpx;}
</style>
